<template>
  <div class="form-item-el">
    <div v-if="mode === 'DESIGN'">
      <el-input disabled :placeholder="placeholder" type="number" />
    </div>
    <div v-else-if="mode === 'PC' && !readonly">
      <el-input
        type="number"
        v-model.number="_value"
        :placeholder="placeholder"
        :clearable="$attrs.clearable"
        :disabled="$attrs.disabled"
        :minlength="$attrs.min"
        :maxlength="$attrs.max"
        :show-word-limit="$attrs.showWordLimit"
      />
    </div>
    <div v-else>
      {{ _value }}
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  modelValue: {
    type: Number,
    default: undefined
  },
  placeholder: {
    type: String,
    default: "请输入数值"
  },
  precision: {
    type: Number,
    default: 0
  },
  mode: {
    type: String,
    default: "DESIGN"
  },
  required: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(["update:modelValue"]);

const _value = computed({
  get() {
    return parseNumber(props.modelValue) || null;
  },
  set(val) {
    emit("update:modelValue", parseNumber(val) || null);
  }
});

const parseNumber = val => {
  if (typeof val === "string") {
    return props.precision > 0 ? parseFloat(parseFloat(val).toFixed(props.precision)) : parseInt(val);
  }
  return val;
};
</script>

<style scoped></style>
